<div id="form<?php echo $uniqid;?>" style="padding-top: 20px">
    <el-form :model="params" method="post" size="small" label-width="140px" @submit.native.prevent label-position="right">
        <el-form-item label="目标代理等级：">
            <el-select v-model="params.level" style="max-width: 180px;" size="mini" placeholder="请选择目标代理等级" popper-class="zindex_popper">
                <el-option :value='0' :key='0' label="请选择目标代理等级"></el-option>
                <el-option
                        v-for="item in level_list"
                        :key="item.level"
                        :label="item.name"
                        :value="item.level">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="持码客户：">
            <el-tag v-for="(member,index) in member_names"
                    :key="member.name"
                    closable="true"
                    size="medium"
                    @close="removeMember(index)">
                {{member.name}}
            </el-tag>
            <el-button class="button-new-tag" size="mini" @click="addMember">+ 添加客户</el-button>
        </el-form-item>
        <el-form-item label="单人发放数量：">
            <el-input-number v-model="params.number" size="mini" :min="0" :max="max_codes"></el-input-number>
            <span>当前可发放最大数量为：{{max_codes}}</span>
        </el-form-item>
    </el-form>
    <div id="upgradecodeEditdlg" class="easyui-dialog" style="width:700px; height:580px;" title="信息框" closed="true"></div>
</div>
<script>
    var upgradecodeEditVm = new Vue({
        el: '#form<?php echo $uniqid;?>',
        data: {
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            level_list: JSON.parse('<?php echo addslashes($level_list);?>'),
            member_names: [],
            member_ids:[],
            total_codes:1000,
            max_codes:1000,
        },
        mounted(){
            this.init();
        },
        methods: {
            init(){

            },
            removeMember:function (key) {
                if(this.member_ids.length > 1){
                    this.member_ids.splice(key,1);
                    this.member_names.splice(key,1);
                    this.setMaxCodes(Math.trunc((this.total_codes / this.member_ids.length)));
                }else{
                    $.messager.alert('提示','至少要保留1位持码客户','warning');
                }
            },
            setMaxCodes:function (newCodes){
                this.max_codes = newCodes;
            },
            addMember: function (){
                $("#upgradecodeEditdlg").dialog({
                    title: '添加关联的客户',
                    closed: false,
                    width: 800,
                    height:638,
                    cache: false,
                    href: '/admin/upgradecode/getmemberlist',
                    modal: true,
                    buttons: [{
                        text: '确定',
                        id: 'upgradecodeMastersubmit',
                        iconCls: 'icon-ok',
                    }, {
                        text: '取消',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#upgradecodeEditdlg").dialog('close');
                        }
                    }]
                });
            },
            submit: function(){
                this.params.member_ids = this.member_ids;
                $.post('/admin/upgradecode/add', this.params, function(data){
                    if(data.ret===0){
                        $.messager.show({
                            title:'提示',
                            msg:data.msg,
                            timeout:3000,
                            showType:'slide'
                        });
                        $('#<?php echo $uniqid;?>').form('clear');
                        $("#upgradecodedlg").dialog('close');
                        upgradecodeReload();
                    }else{
                        $.messager.alert('提示',data.msg,'warning');
                    }
                });
            }
        }
    });
    $('#upgradecodesubmit').click(function(data){
        upgradecodeEditVm.submit();
    })
</script>
<style>
    .zindex_popper{
        z-index: 20000 !important;
    }
</style>